<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%
	String path = request.getContextPath();
%> 
   
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />

<link rel="stylesheet" type="text/css" href="<%=path%>/static/managecss/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css" href="<%=path%>/static/managecss/h-ui.admin/css/H-ui.admin.css" />
<link rel="stylesheet" type="text/css" href="<%=path%>/static/managecss/lib/Hui-iconfont/1.0.8/iconfont.css" />
<link rel="stylesheet" type="text/css" href="<%=path%>/static/managecss/h-ui.admin/skin/default/skin.css" id="skin" />
<link rel="stylesheet" type="text/css" href="<%=path%>/static/managecss/h-ui.admin/css/style.css" />


<title>图库管理</title>
<link href="<%=path%>/static/managecss/lib/lightbox2/2.8.1/css/lightbox.css" rel="stylesheet" type="text/css" >
<!-- 删除样式 -->
<style type="text/css">

	#delete{
		width:50px;
		color:gray;
		text-align:center;
		border-radius:10px;  
		float:right;
		cursor:pointer; 
	}
	#delete:hover{
		color:white;
		background-color:#FF0099;
	}
	#cancel{
		display:none;
	}
</style>
<!-- 页码样式 -->
<style type="text/css">
	#paging a{
		border:2px solid skyblue;
		display:block;
		width:20px;
		height:20px;
		float:left;
		margin-left:2px;
		border-radius:5px;
		text-align:center;
		text-decoration:none;  
	}
	
</style>

</head>
<body>
<nav class="breadcrumb">
<i class="Hui-iconfont">&#xe67f;</i> 
	首页 <span class="c-gray en">&gt;</span> 
	图库管理 <span class="c-gray en">&gt;</span> 
	图库列表 <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a>
</nav>
<div>

<c:set var="beginTime" value="${requestScope.criteriaMap.beginTime }"></c:set>
<c:set var="endTime" value="${requestScope.criteriaMap.endTime }"></c:set>
<c:set var="searchStr" value="${requestScope.criteriaMap.searchStr }"></c:set>
<c:set var="pageNum" value="${requestScope.pageInfo.pageNum}"></c:set>
<c:set var="criteria" value='beginTime=${requestScope.criteriaMap.beginTime }&endTime=${requestScope.criteriaMap.endTime }&searchStr=${requestScope.criteriaMap.searchStr }'></c:set>

<div class="page-container">
	<div class="cl pd-5 bg-1 bk-gray mt-20"> 
		<span class="l"> 
			<a id="add" href="<%=path%>/manager/rubbish/addRubbishPhoto?pageNum=${pageNum}" class="btn btn-primary radius"><i class="Hui-iconfont">&#xe6df;</i> 添加</a> 
			<a id="deleteBatches" href="javascript:;" class="btn btn-danger radius"><i class="Hui-iconfont">&#xe6e2;</i> 批量删除</a>
			<a style="display:none;" id="confirm" href="javascript:;" class="btn btn-danger radius"> 确认删除</a> 
			<a href='javaScript:void(0)' id='cancel' class="btn btn-primary radius">取消删除</a>
			
			<input value="${beginTime }" id="datemin" class="input-text Wdate" name="beginTime" type="text" onfocus="WdatePicker({ maxDate:'#F{$dp.$D(\'datemax\')||\'%y-%M-%d\'}' })" style="width:120px;border-radius:10px;margin-left:260px;">
			-
			<input value="${endTime }" id="datemax" class="input-text Wdate" name="endTime" type="text" onfocus="WdatePicker({ minDate:'#F{$dp.$D(\'datemin\')}',maxDate:'%y-%M-%d' })" style="width:120px;border-radius:10px;">
			<input value="${searchStr }" id="searchStr" name="searchStr" type="text" class="input-text" style="width:180px;border-radius:10px;margin-left:50px;" placeholder="输入名称、用户名">
			<button id="search" class="btn btn-success radius"><i class="Hui-iconfont">&#xe665;</i> 搜索</button> 
			
			</span> <span class="r"><strong></strong> 
		</span> 
	</div>
	
<!-- 图片显示开始 -->
	<div class="portfolio-content">	
		<ul class="cl portfolio-area">
			<c:forEach items="${requestScope.pageInfo.list}" var="photolib">
				<li id="li" style="height:240px;" class="item">
					<label for="checkbox${photolib.id }">
					<div style="height:240px;" class="portfoliobox">
						<span id="box" style="display:none;"><input class="checkbox" id="checkbox${photolib.id }"  type="checkbox" value="${photolib.id }"></span>
						<div class="picbox"><img src="<%=path%>/static/rubbish_img/${photolib.photoName}"></a></div>
						<div>${photolib.rubbish.name }</div>
						<div><fmt:formatDate value="${photolib.inputTime }" pattern="yyyy-MM-dd"/></div>
						<div>${photolib.userinfo.name==null?'管理员' :photolib.userinfo.name}</div>
						<input type="hidden" value="${photolib.id }"/>
						<div id="delete">删除</div>
					</div>
					</label>
				</li>
			</c:forEach>
			
		</ul>
	</div>
<!-- 图片显示结束 -->
</div>

<!-- 分页开始 -->
	<div id="paging" style="padding-left:700px;margin-bottom:100px;">
		<a id="first" style="width:35px" href="<%=path%>/manager/rubbish/rubbishPicShow?pageNum=1&${criteria}">首页</a>
		<a id="prev" style="width:50px;">上一页</a>
		<c:forEach items="${requestScope.pageInfo.navigatepageNums }" var="page">
		<a id="page${page }" href="<%=path%>/manager/rubbish/rubbishPicShow?pageNum=${page}&${criteria}">${page}</a>
		</c:forEach>
		<a id="next" style="width:50px;" href="javaScript:void(0)">下一页</a>&nbsp;
		<a id="last" style="width:35px" href="<%=path%>/manager/rubbish/rubbishPicShow?pageNum=${requestScope.pageInfo.pages}&${criteria}">尾页</a>
		<span>共${requestScope.pageInfo.pages}页</span>&nbsp;&nbsp;
		<span>共&nbsp;${requestScope.pageInfo.total}&nbsp;条数据</span>
	</div>
</div>	
<!-- 分页结束 -->	
<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="<%=path%>/static/managecss/lib/My97DatePicker/4.8/WdatePicker.js"></script>  
<script type="text/javascript" src="<%=path%>/static/js/jquery-3.2.1.js"></script>
<script src="<%=path%>/static/managecss/lib/layer/2.4/layer.js"></script> 
<script type="text/javascript">
$(function(){
	/*当前页改变背景颜色*/
	$("#page${requestScope.pageInfo.pageNum}").css("background-color","skyblue");
	if(${pageNum}<=1){
		$("#prev").css("color","gray");		//当前为第一页，字体颜色为灰色
		$("#prev").css("border","gray");	//当前为第一页，边框颜色为灰色
		$("#first").css("color","gray");	//当前为第一页，首页颜色为灰色
		$("#first").css("border","gray");	//当前为第一页，首页边框颜色为灰色
	}
	if(${pageNum}>=${requestScope.pageInfo.pages}){

		$("#next").css("color","gray");		//当前为最后页，字体颜色为灰色
		$("#next").css("border","gray");	//当前为最后页，边框颜色为灰色
		$("#last").css("color","gray");	//当前为最后页，尾页颜色为灰色
		$("#last").css("border","gray");	//当前为最后页，尾页边框颜色为灰色
	}
	var path = "${pageContext.request.contextPath}";
	
	/*上一页，下一页*/
	$("#prev").click(function(){
		if(${pageNum}<=1){
			$(this).attr("href","javaScript:void(0)");
		}else{
			$(this).attr("href",path+"/manager/rubbish/rubbishPicShow?pageNum=${pageNum-1}&${criteria}");
		}
	});
	
	$("#next").click(function(){
		if(${pageNum}>=${requestScope.pageInfo.pages}){
			$(this).attr("href","javaScript:void(0)");
		}else{
			$(this).attr("href",path+"/manager/rubbish/rubbishPicShow?pageNum=${pageNum+1}&${criteria}");
		}
	});
	
	/*删除单个图片*/
	$("div[id=delete]").click(function(){

		var photoId = $(this).prev().val();
		var _this = $(this);
		
		layer.confirm('确认删除吗？', {
		  btn: ['确定', '取消'] //可以无限个按钮
		  ,
		}, function(index, layero){
			$.post(path+"/manager/deleteById",
					{photoId:photoId},
					function(){
						_this.parents("li").remove();
					});
			layer.close(index);
		}, function(index){
		  
			
		});
		
	});
	
	/*批量删除*/
	/*点击批量删除*/
	$("#deleteBatches").click(function(){
		$("span[id=box]").css("display","block");	//所有复选框显示
		$("#cancel").css("display","inline");		//取消按钮显示
		$("#deleteBatches").css("display","none");	//批量删除隐藏
		$("#confirm").css("display","inline");		//确认删除显示
		$("div[id=delete]").css("display","none");	//单个删除按钮隐藏
		$("input:checkbox").prop("checked",false);		//将所有复选框设置为不选中
	});
	/*点击取消删除*/
	$("#cancel").click(function(){
		$("span[id=box]").css("display","none");		//所有复选框隐藏
		$("#cancel").css("display","none");				//取消按钮隐藏
		$("#deleteBatches").css("display","inline");	//批量删除显示
		$("#confirm").css("display","none");			//确认删除隐藏	
		$("div[id=delete]").css("display","inline");	//单个删除按钮显示
		
	});
	/*点击确认删除*/
	$("#confirm").click(function(){
		var photoIds = "";
		$("input[class=checkbox]:checked").each(function(){
			var photoId = $(this).val();
			photoIds = photoIds+photoId+","
		});
		if(photoIds==""){
			alert("请选择删除的选项");
		}else{
			photoIds = photoIds.substring(0,photoIds.length-1);
			layer.confirm('确认删除吗？', {
			  btn: ['确定', '取消'] //可以无限个按钮
			  ,
			}, function(index, layero){
				$.post(path+"/manager/deleteByIds",
						{photoIds:photoIds},
						function(){
							location.href = path+"/manager/rubbish/rubbishPicShow?pageNum=${pageNum}&${criteria}";
						});
					layer.close(index);
			}, function(index){
			  
				
			});
			
		}
	});
	/*点击搜索*/
	 $("#search").click(function(){
		 var beginTime = $("#datemin").val();
		 var endTime = $("#datemax").val();
		 var searchStr = $("#searchStr").val();
		
		 location.href = path+"/manager/rubbish/rubbishPicShow?beginTime="+beginTime+"&endTime="+endTime+"&searchStr="+searchStr;
	 });
});












</script>
</body>
</html>